import React from 'react';
import router from 'umi/router';
import { Card, Steps, Button, Row, Col } from 'antd';
import downloadFile from '@/utils/utils';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Result from '@/components/Result';

const { Step } = Steps;

class uploadFinish extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      custId: '',
      batchNo: '',
      numberSuccess: 0,
      numberFail: 0,
      errorReason: '',
    };
  }

  componentDidMount() {
    const suppFileData = JSON.parse(window.localStorage.getItem('suppFileData'));
    this.setState({ ...suppFileData });
  }

  // 下载错误信息
  downloadError = () => {
    const { batchNo } = this.state;
    downloadFile({ batchNo }, '/csApi/contacts/expContactError', 'POST');
  };

  // 继续操作
  keepOperate = () => {
    const { custId } = this.state;
    window.localStorage.removeItem('suppFileData');
    router.push(`/salemanage/supplier/contactupload?custId=${custId}`);
  };

  // 完成
  finish = () => {
    const { custId } = this.state;
    window.localStorage.removeItem('suppFileData');
    router.push(`/salemanage/supplier/contactupload?custId=${custId}`);
  };

  render() {
    const { numberSuccess, numberFail, errorReason } = this.state;
    const information = (
      <div style={{ lineHeight: '32px' }}>
        <Row>
          <Col span={4}>导入数据：</Col>
          <Col span={4}>{numberSuccess}条</Col>
        </Row>
        <Row>
          <Col span={4}>错误数据：</Col>
          <Col span={4}>{numberFail}条</Col>
        </Row>
        <Row>
          <Col span={4}>错误原因：</Col>
          <Col span={4}>{errorReason}</Col>
          <Col span={4}>
            <Button onClick={this.downloadError}>下载错误信息</Button>
          </Col>
        </Row>
      </div>
    );
    return (
      <PageHeaderWrapper>
        <Card style={{ padding: '0 25%' }}>
          <Steps current={1}>
            <Step title="上传联系人数据" />
            <Step title="完成" />
          </Steps>
          <Result type="success" title="操作成功" extra={information} style={{ width: '100%' }} />
          <div style={{ marginTop: 50, marginBottom: 30, textAlign: 'center' }}>
            <Button style={{ marginRight: 30 }} size="large" onClick={this.keepOperate}>
              继续操作
            </Button>
            <Button type="primary" size="large" onClick={this.finish}>
              完成
            </Button>
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }
}
export default uploadFinish;
